import React, { Component } from 'react'
import './index.css'
import { Button, Pagination, message } from 'antd'

export default class Systemyimiao extends Component {
  state = {
    userData: [
      {
        id: 1,
        name: '小胡',
        adress: '四川省 成都市 金牛区',
        birth: '1998-01-01',
        isFinish: 0,
        type: '北京中生',
        firstTime: '2021-09-08',
        nextTime: '2021-10-07',
      },
      {
        id: 2,
        name: '小陆',
        adress: '四川省 成都市 青羊区',
        birth: '1998-03-01',
        isFinish: 1,
        type: '北京上生',
        firstTime: '2021-09-08',
        nextTime: '2021-10-07',
      },
      {
        id: 3,
        name: '小辉',
        adress: '四川省 成都市 高新区',
        birth: '1998-04-01',
        isFinish: 1,
        type: '北京左生',
        firstTime: '2021-09-08',
        nextTime: '2021-10-07',
      },
      {
        id: 4,
        name: '小李',
        adress: '四川省 成都市 武侯区',
        birth: '1998-05-01',
        isFinish: 1,
        type: '北京右生',
        firstTime: '2021-09-08',
        nextTime: '2021-10-07',
      },
      {
        id: 5,
        name: '小付',
        adress: '四川省 成都市 成华区',
        birth: '1998-06-01',
        isFinish: 1,
        type: '北京下生',
        firstTime: '2021-09-08',
        nextTime: '2021-10-07',
      },
    ],
    currentPage: 1,
    searchData: '',
    searchType: 'name',
  }
  componentDidMount() {
    if (!this.props.location.query) return
    let { userData } = this.state
    userData.push(this.props.location.query.user)
    this.setState({
      userData,
    })
    console.log(this.props.location)
  }
  render() {
    let { showData } = this
    let { currentPage } = this.state
    let dataIn = showData.filter((v, index) => {
      if (
        index <= (currentPage - 1) * 2 + 1 &&
        index >= (currentPage - 1) * 2
      ) {
        return v
      }
    })

    return (
      <div>
        <div>
          <select name="" id="" ref={(v) => (this.searchType = v)}>
            <option value="name">名字</option>
            <option value="isFinish">已接种</option>
          </select>
          <input
            type="text"
            onBlur={this.search}
            ref={(v) => (this.searchData = v)}
          />
        </div>
        <table border="1" className="tableSystem">
          <thead>
            <tr>
              <th>名字</th>
              <th>地址</th>
              <th>出生年月</th>
              <th>是否接种</th>
              <th>接种类型</th>
              <th>接种时间</th>
              <th>下次接种</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            {dataIn.map((v) => {
              return (
                <tr key={v.id}>
                  <td>{v.name}</td>
                  <td>{v.adress}</td>
                  <td>{v.birth}</td>
                  <td>{v.isFinish ? '是' : '否'}</td>
                  <td>{v.type}</td>
                  <td>{v.firstTime}</td>
                  <td>{v.nextTime}</td>
                  <td>
                    <Button onClick={() => this.toInject(v)}>接种疫苗</Button>
                    <Button
                      danger
                      data-btn="delete"
                      data-id={v.id}
                      onClick={() => this.deleteUser(v.id)}
                    >
                      删除用户
                    </Button>
                  </td>
                </tr>
              )
            })}
          </tbody>
        </table>
        <Pagination
          total={showData.length}
          pageSize={2}
          onChange={(a) => this.setState({ currentPage: a })}
          showTotal={() =>
            `当前${currentPage}页/一共${Math.ceil(showData.length / 2)}页`
          }
        />
        <Button onClick={this.goAdd}>添加用户</Button>
      </div>
    )
  }
  search = () => {
    this.setState({
      searchData: this.searchData.value,
      searchType: this.searchType.value,
    })
  }
  get showData() {
    let { userData, searchData, searchType } = this.state
    return userData.filter((v) => {
      if (!searchData) {
        return v
      } else {
        if (JSON.stringify(v[searchType]).indexOf(searchData) !== -1) {
          return v
        }
      }
    })
  }

  deleteUser = (id) => {
    let userData = this.state.userData.filter((v) => v.id !== id)
    this.setState({ userData })
    message.success('删除成功')
  }
  goAdd = () => {
    this.props.history.push('/home/addYimiao')
  }
  toInject = (data) => {
    this.props.history.push({
      pathname: '/home/inject',
      data,
    })
  }
}
